<template>
  <div class="card">
    <div class="square">
      <img :src="newurl" @click="jumpUrl" />
      <div class="close" @click="DelCard()">&times;</div>
    </div>
    <div>{{ NewCard.name }}</div>
  </div>
</template>
<script lang="ts" setup>
import { ref, toRefs, onMounted, computed, compile } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { DelNewBook } from "../http/index";

const emit = defineEmits(["loadNewCar"]);
const props = defineProps({
  NewCard: {
    type: Array,
  },
});
const { NewCard } = toRefs(props);
onMounted(() => {
  console.log(NewCard?.value);
});

//解析url
const newurl = computed(() => {
  try {
    var pattern =
    /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/;
  return (
    "https://api.iowen.cn/favicon/" +
    (NewCard?.value.url).match(pattern)[0] +
    ".png"
  );
  } catch (error) {
    return null;
  }
});

const jumpUrl = () => {
  window.open(NewCard?.value.url);
};

const DelCard = () => {
  ElMessageBox.confirm(`你要删除${NewCard?.value.name}吗？`, "删除图标", {
    confirmButtonText: "OK",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      var res = (await DelNewBook(NewCard?.value.id)).data;
      console.log(res);
      if (res.statusCode == 200) {
        ElMessage({
          type: "success",
          message: `${res.message}`,
        });
      } else if (res.statusCode == 201) {
        ElMessage({
          type: "warning",
          message: `${res.message}`,
        });
      } else {
        ElMessage({
          type: "error",
          message: `${res.message}`,
        });
      }
      emit("loadNewCar");
    })
    .catch(() => {
      ElMessage({
        type: "error",
        message: "删除失败",
      });
    });
};
</script>

<style scoped>
.card {
  width: 100px;
  height: 120px;
  text-align: center;
}
.card img:hover {
  cursor: pointer;
}
.square {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  border: 2px solid #ccc;
  box-shadow: 2px 2px 5px #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.close {
  position: absolute;
  top: -10px;
  right: 0;
  font-size: 30px;
  color: red;
  display: none;
}
.close{
  cursor: pointer;
}
.square:hover > .close {
  display: block;
}
</style>